<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯爱薇o朝圣之路 VUE双向数据绑定</title>
    <!-- <script src="https://unpkg.com/vue@next" ></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    //创建局部组件coursesContainer
    const coursesContainer = {
        data() {
            return {
                courses:["C++","DevOps"]
            }
        },
        template: `<div v-for="(course,index) in courses">目前的课程：{{ course }}</div>`

    }

    const app=Vue.createApp({ 
                                data(){
                                        return{
                                            name: ' 唯爱薇o朝圣之路 | 我可以改变 | 我是动态值 | 0002 ',
                                            checked: false,
                                            relatives: ["liumin","liuchen","liuxiaozhen","liulihua","liuxiaonian","liujianhua","liudongliang"],
                                            selected:[],
                                            select:'liuchen',

                                        }
                                },
                                methods:{
                                },
                                //注册局部组件方式一[简写]
                                //components:{
                                //    coursesContainer,
                                //},
                                //注册局部组件方式二[完整]
                                components:{
                                    discipline: coursesContainer,
                                },                                                             
                                //引用全局组件<box01>和注册过来的局部组件
                                //静态参数这里还有一个小坑需要说明一下，就是静态传递的只能是字符串类型String，而动态传参的就可以是多种类型了，甚至是一个函数(方法).
                                template:`
                                    <box01 staticValue="我是静态值" sex="男" :dynamicValue="name"/>
                                    <hr />

                                    <!-- 局部组件调用方式一[简写] -->
                                    <!-- <coursesContainer /> -->
                                    <!-- 局部组件调用方式二[完整] -->
                                    <discipline />

                                    ` 
    })

    //定义全局组件
    app.component("box01",{
        //style="color:orange"为行内样式写法
        props: [
            'staticValue',
            'sex',
            'dynamicValue'
        ],
        template:`
            <div>
                <div class="red"> box01: 我是子组件盒子1 </div>
                <p> {{ staticValue }}</p>
                <p> {{ sex }}</p>
                <p> {{ dynamicValue }}</p>
                <div style="color:orange"> box01: 我是子组件盒子1 </div>
            </div>
        `
    })

    const vm=app.mount("#app")

</script>

</html>